<template>
    <div class="ui-scroll-page">
    <div class="co-toolbar box-row">
        <el-button-group>
            <el-button type="primary" size="default"  @click="onCreateAccount(null)">添加用户</el-button>
        </el-button-group>
    </div>
    <el-row :gutter="5">
        <el-col :span="24" :xl="8" :lg="12" :md="12" v-for="(item,index) in users" :key="item.id">
            <el-card :class="{'ui-info-board':true, 'ui-user-frozen': item.frozen==1}" shadow="hover">
                <template #header >
                    <div class="card-header">
                        <span v-rolename="item.role_id"></span>
                        <!--<span v-if="(merchant.shift_name == item.realname)" style="color: #67c23a;">当前值班人</span>-->
                    </div>
                </template>
                <el-row>
                    <el-col :span="24" :xl="12" :lg="12">
                        <span>姓名:</span>
                        <span>{{item.realname}}</span>
                    </el-col>
                    <el-col :span="24" :xl="12" :lg="12">
                        <span>电话:</span>
                        <span>{{item.tel}}</span>
                    </el-col>
                    <el-col :span="24" :xl="12" :lg="12">
                        <span>登录名:</span>
                        <span>{{item.username}}</span>
                    </el-col>
                    <el-col :span="24" :xl="12" :lg="12">
                        <span>创建时间:</span>
                        <span v-datetime="item.createtime"></span>
                    </el-col>
                </el-row>
                <div class="ui-card-action">
                    <el-button type="primary" size="small" :disabled="!canupdate(item)" @click="onCreateAccount(item)">修改...</el-button>
                    <el-popconfirm title="您确认需要删除这个用户么?" :disabled="!candestroy(item)" @confirm="onDestroyUser(item)">
                        <template #reference>
                            <el-button type="danger" size="small" :disabled="!candestroy(item)">删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </el-card>
        </el-col>
    </el-row>
    </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { ElMessage } from 'element-plus';
import { Session } from "../../uiframe/services/session";
import { UiShowDialog } from "../../uiframe/layout/components/CompFactory.vue";
import CreateAccountDialog from "./dialog/CreateAccountDialog.vue";
import { dateFormat } from "../../uiframe/utils";
import axios from "axios";

export default {
    directives: {
        rolename: {
            mounted(el, bidning) {
                el.innerHTML=['','老板','店长','收银员'][bidning.value];
            }
        },
        idcard:{
            mounted(el,v){
                el.innerHTML = idCardShow(v.value);
            }
        },
        datetime:{
            mounted(el,v){
                el.innerHTML = dateFormat(v.value, 'Y-M-D h:m');
            }
        }
    },
    setup() {
        const au = Session.auth.value,
            {id:user_id,role_id } = au;
            
        let data = reactive({
            users:[],
            user_id, role_id,
            canupdate:(item)=>{
                switch(role_id){
                case 1:
                    return true;
                case 2:
                    return item.role_id == 3 || item.id==user_id;
                case 3:
                    return item.id == user_id;
                }
                return false;
            },
            candestroy:(item)=>{
                switch(role_id){
                case 1:
                    return item.id != user_id;
                case 2:
                    return (item.id != user_id) && item.role_id == 3;
                case 3:
                    return false;
                }
                return false;
            },
        });
        const load = ()=>{
            axios.post("/accounts/read", {}).then(({ status, data:res }) => {
                data.users = res.data;
            }).catch(res=>{
                console.log(res);
            });
        },
        onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        methods = {
            onCreateAccount:(u)=>{
                let payload = u == null ? {role_id:data.role_id,user_id:data.user_id} : {user:u, role_id:data.role_id, user_id:data.user_id};
                UiShowDialog(CreateAccountDialog,payload).then(res=>{
                    res.success && load();     
                }).catch(res=>{})
            },
            onDestroyUser:(item)=>{
                axios.post('/accounts/destroy', {id: item.id}).then(({ status, data:res }) => {
                    onmessage(res);
                    if(res.success){
                        load();
                    }
                }).catch(res=>{
                    onmessage(res);
                });
            }
        }

        load();
        return {
            ...toRefs(data),
            ...methods
        };
    }
};
</script>
<style lang="scss">
.ui-card-action {
    text-align: right;
}
.ui-user-frozen{
    background: #f56c6c0F;
    border-color: #b67272;
    .el-card__header{
        border-bottom: 1px solid #b67272;
    }
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>